<template>
  <el-container class="common-layout">
    <el-aside>
      <div>
        <sidebar />
      </div>
    </el-aside>
    <el-container>
      <el-header style="width: 930px">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          style="margin-left: -60px"
        >
          <el-menu-item index="1">资源</el-menu-item>
          <el-menu-item index="2">视频课</el-menu-item>
          <el-menu-item index="3">线下课</el-menu-item>
          <el-menu-item index="4">直播课</el-menu-item>
        </el-menu>
      </el-header>

      <el-main class="main">
        <el-form :inline="true">
          <el-form-item class="el-menuSize">
            <el-input v-model="collectionMsg" placeholder="视频名称" />
          </el-form-item>
          <el-form-item style="margin-left: -20px">
              <el-button  @click="getCollectionMsg">搜索</el-button>
          </el-form-item>
          <el-form-item style="float: right"
            ><el-button>批量删除</el-button>
          </el-form-item>
          <el-row v-for="i in CollectionList">
            <el-col :span="5"><div class="grid-content ep-bg-purple" />
              <img :src="i.momentBackup.cover" style="width: 169px;height: 101px;margin: 10px;">
            </el-col>
            <el-col :span="8" style="margin: auto;font-size:16px"><div class="grid-content ep-bg-purple-light" />
              <div>{{i.momentTitle}}</div>
              <div style="margin-left:10px">作品</div>
              <div>
                <el-avatar :src="i.momentBackup.creatorBackup.avatar" size="small"/>
                {{i.momentBackup.creatorBackup.name}}
              </div>              
            </el-col>
            <el-col :span="3" style="margin: auto"><div class="grid-content ep-bg-purple" />
              {{dayjs(i.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
            </el-col>
            <el-col :span="5" style="margin:auto"><div class="grid-content ep-bg-purple-light" />
              <el-button type="danger" @click="deleteList">删除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </el-container>
</template>
  
  <script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import practiceApi from "@/api/practice";
import sidebar from "@/views/practice/sidebar/index.vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const CollectionList = ref<any>();
const deleteList = ()=>{
   ElMessage.success('删除成功')
}
const token = ref('ceddaee4-94de-4a12-96e1-3e7efc5601a0')
const pageSize = ref(10)
const pageNum = ref(0)
const activeIndex = ref("1");
const collectionMsg = ref('')
const suject = ref<any>('activity')
const msgList2 =ref()
onMounted(() => {
  getCollectionList();
});
const getCollectionMsg = async () => {
  let result = await practiceApi.getCollectionMsg(token.value,pageSize.value,pageNum.value,suject.value,collectionMsg.value) 
  msgList2.value = result.content
  CollectionList.value = msgList2.value
  console.log(result.content)
};
const getCollectionList = async () => {
  let result = (await practiceApi.getCollectionList()) as any;
  CollectionList.value = result.content;
   console.log(result.content);
};

</script>
<style scoped lang="less">

.common-layout {
  background-color: rgb(245, 247, 249);
  .main {
    width: 950px;
    margin-left: -40px;
    margin-top: 10px;
    background-color: white;
    height: 700px;
  }
  .el-menuSize {
    padding: 0, 10px;
  }
}
</style>